<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box">
      <user-tab-list
        :list="tablist"
        :returnButton="true"
        backUrl="/user/template"
      ></user-tab-list>
      <div v-if="loading" style="position: relative; height: 374px">
        <Spin :withIcon="true"></Spin>
      </div>
      <div v-else class="form-input-area">
        <div class="flx-row-s-c div-line" style="margin-top: 20px">
          <div class="long-name">模板名称</div>
          <Input
            v-model.trim="name"
            placeholder="请输入模板名称"
            style="width: 280px"
          />
          <div
            class="user-strong-button small-button-size"
            style="margin-left: 20px"
            @click="modify"
          >
            确定修改
          </div>
        </div>

        <div class="flx-row-s-c div-line">
          <div class="long-name">模板类型</div>
          <div class="c-black f-14">{{ type == 1 ? "企业" : "个人" }}</div>
        </div>

        <div v-if="type == 1" class="flx-row-s-c div-line">
          <div class="long-name">企业名称（中文）</div>
          <div class="c-black f-14">{{ locBusinessName }}</div>
        </div>
        <div v-if="type == 1" class="flx-row-s-c div-line">
          <div class="long-name">企业名称（英文）</div>
          <div class="c-black f-14">{{ intBusinessName }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">姓名（中文）</div>
          <div class="c-black f-14">{{ locName }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">姓名（英文）</div>
          <div class="c-black f-14">{{ intName }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">邮箱</div>
          <div class="c-black f-14">{{ email }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">国家</div>
          <div class="c-black f-14">{{ country }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">省份-城市</div>
          <div class="c-black f-14">
            {{ locSp }}{{ locCity }}{{ locStreet }}
          </div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">联系地址</div>
          <div class="c-black f-14">{{ locStreet2 }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">邮政编码</div>
          <div class="c-black f-14">{{ pc }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">联系电话</div>
          <div class="c-black f-14">{{ voice }}</div>
        </div>
        <div class="flx-row-s-c div-line">
          <div class="long-name">传真号码</div>
          <div class="c-black f-14">{{ fax }}</div>
        </div>
      </div>
    </div>

    <div class="user-main-box pub-m-t-20 pub-p-t-10">
      <div class="filter-line b-b-d flx-row-s-c">
        <span
          v-for="(item, index) in operateList"
          :key="index"
          class="select-item"
          :class="[index == operateSelect ? 'active' : 'normal']"
          style="margin-right: 40px"
          @click="operateSelectEvent(index)"
        >
          {{ item }}
        </span>
      </div>


      <!-- 注册商模板相关 -->
      <!-- <template v-if="operateSelect == 0">
          <div class="f-16 f-w-600 pub-p-b-10 pub-p-t-20 c-black">已实名后缀</div>
          <div class="flx-row-s-c suffix-box">
            <p class="suffix-item"
              v-for="(item, index) in suffixList"
              :key="index">
              {{item}}
            </p>
          </div>
          <div class="f-16 f-w-600 pub-p-b-10 pub-p-t-20 c-black">未实名后缀</div>
          <div class="flx-row-s-c suffix-box">
            <CheckboxGroup v-model="checkAllGroup" @on-change='checkAllGroupChange'>
              <div class="suffix-item pub-p-r-8"
                v-for="(item, index) in unrealizedList"
                :key="index">
                <p class="flx-row-bw-c f-16">
                  <span>{{item}}</span>
                  <Checkbox :label='item'></Checkbox>
                </p>
                <p class="pub-m-t-5">状态：<span class="c-o">未审核</span></p>
              </div>
            </CheckboxGroup>

          </div>
          <div class="btn-area flx-row-s-c">
            <Checkbox
              class="radio-mg-r-20 "
              v-model="checkAll"
              @on-change="handleCheckAll"
            >
            全选
            </Checkbox>
            <div
              class="user-strong-button submit-button-style "
              @click="submitEvent"
            >
              提交实名
            </div>
         </div>
      </template> -->
      <template>
        <div
            class="tips-area"
            style="margin-bottom: 20px"
          >
            温馨提示：我们会将您的模板信息提交至其他注册商。若您使用此功能即表示您自愿授权给190代为操作，同意190将我的实名材料提交至合作商平台由合作商提交实名。
        </div>

      <div class="listTable-area pub-m-t-15">
        <div style="position: relative">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="filter-line search-result-line flx-row-bw-c">
            <span class="f-14 c-g"
              >搜索结果共<span class="c-black">{{
                total != null ? ` ${total} ` : ""
              }}</span
              >条</span
            >
          </div>
          <table class="table-area">
            <thead>
              <tr>
                <th>
                  <div class="line-style" style="min-width: 48px">序号</div>
                </th>
                <th><div class="line-style">注册商</div></th>
                <th><div class="line-style">说明</div></th>
                <th><div class="line-style">状态</div></th>
                <th><div class="line-style">操作</div></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list" :key="item.id">
                <td>
                  <div class="line-style">
                    <span class="normal-f" title="">{{
                      index + 1 + (page - 1) * pageSize
                    }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{ item.name }}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{
                      item.isVerify === 1 ? '可同步' : "无法同步"
                    }}</span>
                  </div>
                </td>
                 <td>
                  <div class="line-style">
                    <span class="normal-f f-ell-sin">{{ item.status | statusFilter}}</span>
                  </div>
                </td>
                <td>
                  <div class="line-style normal-f">
                    <div
                        v-if="item.isVerify === 1 && item.status === 0"
                        class="form-font-button"
                        @click="synchronous(item.id)"
                      >
                        同步
                    </div>
                    <div v-else>--</div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <Empty-State
            v-if="total != null && total == 0"
            content="未搜索到任何内容！"
          ></Empty-State>
          <div class="form-page-bottom-area flx-row-c-c">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
      </div>
      </template>
    </div>

    <TemplateEmailModall  :show.sync="addEmailModalShow" :info="emailInfo" :registrarId="registrarId" :templateId="id"  @success="getList" />
  </div>
</template>

<script>
import { getBottom } from "@/api/data";
import { getTemplateCopy, editTemplateName, getRegistrarList, getRegistrarEmailInfo } from "@/api/user";
export default {
  name: "TemplateDetail",
  components: {
    TemplateEmailModall: () =>
        import("_c/modal/userModal/templateEmailModal/index.vue"),
  },
  filters: {
    statusFilter(val) {
      let title = "";
      switch (val) {
        case 0:
          title = "未审核";
          break;
        case 1:
          title = "审核中";
          break;
        case 2:
          title = "审核通过";
          break;
        case 3:
          title = "审核未通过";
          break;
      }
      return title;
    },
  },
  data() {
    return {
      loading: true,
      breadCrumb: [{ name: "域名管理" }, { name: "模板详情" }],
      tablist: [
        {
          name: "模板详情",
          to: "/user/templateDetails",
        },
      ],
      id: "",
      name: "",
      type: "", //类型
      locBusinessName: "",
      intBusinessName: "",
      locName: "",
      intName: "",
      locSp: "",
      locCity: "",
      email: "",
      country: "",
      locStreet: "",
      locStreet2: "",
      pc: "",
      voice: "",
      fax: "",

      operateList: ["同步模板"],
      operateSelect:0,
      suffixList:['.com','.cn','.com.cn','.net','.vip','.中国','.商品','.信息','.net.cn','.org.cn'],
      unrealizedList:['.vip','.中国','.商品','.信息'],
      checkAllGroup:[],
      checkAll: false,
      colorType: 0,

      // 分页设置
      total: 0,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],

      emailInfo:{},
      addEmailModalShow:false,
      registrarId:''
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getDetail();
    this.getList();
    if (this.$storage.getColorType()) {
      this.colorType = this.$storage.getColorType();
    } else {
      this.getBottom();
    }
  },
  methods: {
    async getBottom() {
      const { code, data } = await getBottom();
      if (code === 200) {
        this.colorType = data.colorType;
      }
    },
    // 获取详情
    async getDetail() {
      if (!this.id) {
        this.loading = false;
        return;
      }
      let res = await getTemplateCopy({
        templateId: this.id,
      });
      if (res.code == 200) {
        this.name = res.data.name;
        this.type = res.data.type;
        this.locBusinessName = res.data.locBusinessName;
        this.intBusinessName = res.data.intBusinessName;
        this.locName = res.data.locName;
        this.intName = res.data.intName;
        this.email = res.data.email;
        this.country = res.data.country;
        this.locSp = res.data.locSp;
        this.locCity = res.data.locCity;
        this.locStreet = res.data.locStreet;
        this.locStreet2 = res.data.locStreet2;
        this.pc = res.data.pc;
        this.voice = res.data.voice;
        this.fax = res.data.fax;
      }
      this.loading = false;
    },
    // 修改
    async modify() {
      if (this.name == null || this.name === "") {
        this.$Message.warning("请输入模板名！");
        return;
      }
      const data = {
        templateId: this.id,
        templateName: this.name,
      };
      const res = await editTemplateName(data);
      if (res.code == 200) {
        this.$Message.success("修改成功！");
      }
    },
    // 实名
    submitEvent(){},
    operateSelectEvent(index){
      this.operateSelect = index
    },
    checkAllGroupChange(data){
      if (data.length === this.unrealizedList.length) {
        this.checkAll = true;
      } else{
        this.checkAll = false;
      }
    },
    // 全选
    handleCheckAll (val) {
      if (val) {
        this.checkAllGroup = this.unrealizedList;
      } else {
        this.checkAllGroup = [];
      }
    },
    // 获取注册商模板列表
    async getList(){
      this.loading = true;
      let params = {
        limit: this.pageSize,
        page: this.page,
        templateId:this.id,
      };
      let res = await getRegistrarList(params);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getTemplateList();
          return;
        }
        this.list = res.data;
        this.total = res.data.length;
      }
      this.loading = false;
    },
    // 获取注册商模板邮箱信息
    async getRegistrarEmailInfo(registrarId){
      const params = {
        registrarId:registrarId,
        templateId:this.id,
      }
      const res = await getRegistrarEmailInfo(params);
      if (res.code == 200) {
         this.emailInfo = res.data
         this.addEmailModalShow = true;
      }
    },
    // 同步
    synchronous(registrarId){
      this.registrarId = registrarId;
      this.getRegistrarEmailInfo(registrarId)
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // // 同步
    // deleteItem(id) {
    //   this.$Modal.confirm({
    //     title: "同步确认",
    //     content: "<p>确定要同步吗？</p>",
    //     onOk: async () => {
    //       let res = await deleteTemplate(id);
    //       if (res.code == 200) {
    //         this.$Message.success("同步成功！");
    //         this.getTemplateList();
    //       }
    //     },
    //   });
    // }
  },
};
</script>

<style lang="scss" scoped>
/deep/ .ivu-checkbox+span, .ivu-checkbox-wrapper+span{
  display: none;
}
/deep/ .ivu-checkbox-indeterminate .ivu-checkbox-inner{
   background-color: $mainColor!important;
   border-color: $mainColor !important;
}
.long-name {
  min-width: 135px;
}
.form-input-area{
  padding:30px 40px 0;
}
.select-item {
    width: 137px;
    height: 28px;
    font-size: 14px;
    transition: color 0.3s;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 1;

    &.normal {
      border: 1px solid #e4e6fa;
      color: #000;
    }
    &.active,
    &:hover {
      @include h-c($mainColor, $color-main-8, #fff, #fff);
    }
}
.suffix-box{
  flex-wrap: wrap;
  margin-left: -6px;
  .suffix-item{
    padding: 6px 24px;
    margin: 6px;
    line-height: 22px;
    min-width: 240px;
    display: inline-block;
    box-sizing: border-box;
    background-color: #f4f6fb;
  }
}
.btn-area {
  border-top: 1px solid #e4e6fa;
  padding-top: 30px;
  margin-top: 30px;
}
</style>
